<template>
  <ele-page
    flex-table
    :multi-card="false"
    hide-footer
    style="min-height: 420px"
  >
    <login-record-search
      :where="defaultWhere"
      @search="reload"
      :cache-key="getCurrentInstance().type.name"
    />
    <ele-card
      :body-style="{ paddingTop: '8px' }"
      flex-table
      :multi-card="false"
    >
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :pagination="pagination"
        :loading="loading"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        :highlight-current-row="true"
        :export-config="{ fileName: '登录日志数据' }"
        :where="defaultWhere"
        :cache-key="getCurrentInstance().type.name"
      >
        <template #toolbar>
          <el-button
            type="primary"
            class="ele-btn-icon"
            :icon="DownloadOutlined"
            @click="exportData"
          >
            导出
          </el-button>
        </template>
        <template #login_type="{ row }">
          <el-tag
            v-if="row.login_type === 0"
            size="small"
            type="success"
            :disable-transitions="true"
          >
            登录成功
          </el-tag>
          <el-tag
            v-else-if="row.login_type === 1"
            size="small"
            type="danger"
            :disable-transitions="true"
          >
            登录失败
          </el-tag>
          <el-tag
            v-else-if="row.login_type === 2"
            size="small"
            type="info"
            :disable-transitions="true"
          >
            退出登录
          </el-tag>
          <el-tag
            v-else-if="row.login_type === 3"
            size="small"
            type="warning"
            :disable-transitions="true"
          >
            刷新TOKEN
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-link
            type="danger"
            underline="never"
            @click="action('remove', row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { EleMessage } from "ele-admin-plus/es";
import ExcelJS from "exceljs";
import { download } from "@/utils/common";
import { DownloadOutlined } from "@/components/icons";
import LoginRecordSearch from "./components/login-record-search.vue";
import {
  pageLoginRecords,
  listLoginRecords,
  removeLoginRecordBatch,
} from "@/api/system/login-record";
import { useTable } from "@/hooks/useTable";
import { useOperator } from "@/hooks/operator";

defineOptions({ name: "SystemLoginRecordTable" });

/** 默认搜索条件 */
const defaultWhere = reactive({
  username: "",
  nickname: "",
});

/** 表格列配置 */
const columns = ref([
  {
    type: "index",
    columnKey: "index",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    prop: "username",
    label: "账号",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "nickname",
    label: "用户名",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "ip",
    label: "IP地址",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "device",
    label: "设备型号",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "os",
    label: "操作系统",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "browser",
    label: "浏览器",
    sortable: "custom",
    minWidth: 110,
  },
  {
    prop: "login_type",
    label: "操作类型",
    sortable: "custom",
    width: 130,
    slot: "login_type",
    filters: [
      {
        text: "登录成功",
        value: "0",
      },
      {
        text: "登录失败",
        value: "1",
      },
      {
        text: "退出登录",
        value: "2",
      },
      {
        text: "刷新TOKEN",
        value: "3",
      },
    ],
    filterMultiple: false,
    align: "center",
    formatter: (row) =>
      ["登录成功", "登录失败", "退出登录", "刷新TOKEN"][row.login_type],
  },
  {
    prop: "comments",
    label: "备注",
    sortable: "custom",
    minWidth: 110,
    align: "center",
  },
  {
    prop: "created_at",
    label: "登录时间",
    sortable: "custom",
    width: 180,
    align: "center",
  },
  {
    columnKey: "action",
    label: "操作",
    width: 80,
    align: "center",
    slot: "action",
    hideInPrint: true,
    hideInExport: true,
  },
]);

const { loading, pagination, tableRef, datasource, reload } = useTable({
  getPages: pageLoginRecords,
  beforeQuery: (params) => {
    // 可以修改或添加查询参数
    console.log("查询参数:", params); // 调试用，实际不需要这一行
    return {
      ...params,
      ...params.where,
    };
  },
  afterQuery: () => {
    // 查询后处理
  },
});

// 使用 useOperator 处理删除操作
const { action } = useOperator({
  actionConfigs: {
    remove: {
      title: "删除",
      api: removeLoginRecordBatch,
      confirmText: "确定要删除“{%s}”吗?",
    },
  },
  idField: "id",
  idName: "title",
  reload,
});

/** 导出数据 */
const exportData = () => {
  // 请求查询全部接口
  const loading = EleMessage.loading({
    message: "请求中..",
    plain: true,
  });
  tableRef.value?.fetch?.(({ where, orders, filters }) => {
    listLoginRecords({ ...where, ...orders, ...filters })
      .then((data) => {
        const workbook = new ExcelJS.Workbook();
        const sheet = workbook.addWorksheet("Sheet1");
        sheet.addRow([
          "账号",
          "用户名",
          "IP地址",
          "设备型号",
          "操作系统",
          "浏览器",
          "操作类型",
          "备注",
          "登录时间",
        ]);
        data.forEach((d) => {
          sheet.addRow([
            d.username,
            d.nickname,
            d.ip,
            d.device,
            d.os,
            d.browser,
            ["登录成功", "登录失败", "退出登录", "刷新TOKEN"][d.login_type],
            d.comments,
            d.created_at,
          ]);
        });
        // 设置列宽
        [16, 16, 22, 22, 18, 20, 14, 16, 24].forEach((width, index) => {
          sheet.getColumn(index + 1).width = width;
        });
        // 设置样式
        sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
          row.height = 20;
          row.eachCell({ includeEmpty: true }, (cell) => {
            cell.border = {
              top: { style: "thin" },
              left: { style: "thin" },
              bottom: { style: "thin" },
              right: { style: "thin" },
            };
            cell.alignment = {
              vertical: "middle",
              horizontal: "center",
            };
            cell.font = { size: 12, bold: rowIndex === 1 };
          });
        });
        // 下载文件
        workbook.xlsx.writeBuffer().then((data) => {
          download(data, "登录日志.xlsx");
          loading.close();
        });
      })
      .catch((e) => {
        loading.close();
        EleMessage.error(e.message);
      });
  });
};
</script>
